<template>
	<div class="page">
		<!-- 排序 -->
		<div class="sort-view c-panel">
			<div class="btns-view">
    				<Button 
    					type="primary" 
    					@click="click2Sort()"
    					style="margin-right: 10px;"
    					:loading="sortBtnLoading">
    					{{data.sortable ? '保存排序' : '选择排序'}}
    				</Button>
    				<Button 
    					type="ghost" 
    					v-if="data.sortable"
    					@click="click2CancelSort()">
    					取消排序
    				</Button>
			</div>
			
			<div class="data-view">
				<CWorksLabelSortView
					:data="data">
				</CWorksLabelSortView>
			</div>
		</div>
		
		<div class="list-view c-panel">
    			<div class="btns-view">
    				<Button 
    					type="primary"
    					style="margin-right: 10px;"
    					:loading="data.loading"
    					@click="click2Refresh()">刷新{{names[type - 1]}}</Button>

    				<Button 
    					type="primary" 
    					@click="click2New()">新增{{names[type - 1]}}</Button>

    			</div>
    			
    			<div class="data-view">
	    			<CWorksLabelListView
	        			:data="data"
	        			@on-action="clickItem">
	    			</CWorksLabelListView>
    			</div>
    		</div>
	    <!-- 编辑窗口 -->
	    <CWorksLabelEditModal
	    		:data="editData"
	    		@on-submit="submit2Edit">
	    </CWorksLabelEditModal>
	</div>
</template>

<script>
	//新建、编辑
	import CWorksLabelEditModal from '@/pages/works/view/CWorksLabelEditModal.vue';
	//列表
	import CWorksLabelListView from '@/pages/works/view/CWorksLabelListView.vue';
	import CWorksLabelSortView from '@/pages/works/view/CWorksLabelSortView.vue';
	
	import WLabelService from '@/services/WLabelService.js';

	const $wLabelService = WLabelService();
	export default {
		data() {
			return {
				sortBtnLoading: false,
				type: 1,
				names: ['发行日期', '片长', '集数', '票房'],
				data: {
					data: [],
					loading: true,
					sortable : false
				},
				editData: {
					isShow: false,
					isBtnLoading: false,
					submitBtnTxt: '新建',
					modalTitle: '上映时间',
					type : 1,
					index : 0,
					data : {
						lid: null,
						label: null,
						min: -1,
						max: -1,
						sort: 0,
						type: 1
					}
				}
			};
		},
		components: {
			CWorksLabelSortView, CWorksLabelListView, CWorksLabelEditModal
		},
		mounted() {
			this.type = this.$route.query.type;
			var $this = this;
			$this.data.loading = true;
			$wLabelService.getWorksLabels(this.type)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					var data = res.data;
					$this.data.data = data;
				}
				$this.data.loading = false;
			}, function(error) {
				console.log(error);
				$this.data.loading = false;
			});
		},
		watch: {
		  '$route' (to, from) {
		    this.type = this.$route.query.type;
			var $this = this;
			$this.data.loading = true;
			$wLabelService.getWorksLabels(this.type)
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					var data = res.data;
					$this.data.data = data;
				}
				$this.data.loading = false;
			}, function(error) {
				console.log(error);
				$this.data.loading = false;
			});
		  }
		},
		methods: {
			click2Sort: function() {
				var $this = this;
				if(!$this.data.sortable) {
					$this.data.sortable = true;
				} else {
					var sorts = [];
					var len = $this.data.data.length;
					$this.data.data.forEach(function(item, index) {
						sorts.push({
							id: item.lid,
							sort: len - index
						})
					});
					$this.sortBtnLoading = true;
					$wLabelService.editSort(JSON.stringify(sorts))
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						var msg = res.msg;
						if(code == 100) {
							$this.data.sortable = false;
						}
						$this.sortBtnLoading = false;
						$this.$Message.info(msg);
					}, function(error) {
						$this.sortBtnLoading = false;
						$this.$Message.error('网络异常，请稍后再试！');
					});
				}
			},
			click2CancelSort: function() {//取消排序
				var $this = this;
				$this.data.sortable = false;
			},
			
			click2Refresh() {//点击刷新
				var $this = this;
			 	$this.data.loading = true;
				$wLabelService.getWorksLabels(this.type)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						$this.data.data = [];
						var data = res.data;
						$this.data.data = data;
					}
					$this.data.loading = false;
				}, function(error) {
					console.log(error);
					$this.data.loading = false;
				});
			},
			
			click2New() {
				var $this = this;
				$this.editData.data = {
					lid: null,
					type: $this.type,
					label: null,
					min: -1,
					max: -1,
					sort: 0
				}
				$this.editData.type = 1;
				$this.editData.submitBtnTxt = '新建';
				$this.editData.isShow = true;
			},
			clickItem(type, data) {//list view item action
				var $this = this;
				if(type == 'editItem') {
					var item = data.row;
					$this.editData.data = {
						lid: item.lid,
						label: item.label,
						min: item.min,
						max: item.max
					}
					$this.editData.submitBtnTxt = '编辑';
					$this.editData.isShow = true;
					$this.editData.type = 2;
					$this.editData.index = data.index;
				} else if(type == 'editItem2State') {
					$this.edit2State(data.row);
				} else if(type == 'deleteItem') {
					$this.deleteItem(data.row.lid, data.index);
				}
				console.log(type);
			},
			submit2Edit(data) {//编辑
				var $this = this;
				var type = $this.editData.type;
				$this.editData.isBtnLoading = true;
				$wLabelService.edit({
					lid: data.lid,
					label: data.label,
					type: data.type,
					min: data.min,
					max: data.max
				})
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					var msg = res.msg;
					if(code == 100) {
						$this.editData.isShow = false;	
						if(type == 1) {
							$this.data.data.push(res.data);
						} else {
							var index = $this.editData.index;
							var item = $this.data.data[index];
							item.label = data.label;
							item.min = data.min;
							item.max = data.max;
						}
					}
					$this.$Message.info(msg);
					$this.editData.isBtnLoading = false;
				}, function(error) {
					$this.$Message.error('网络异常，请稍后再试！');
					$this.editData.isBtnLoading = false;
				});
			},
			deleteItem(lid, index) {
				var $this = this;
				this.$Modal.confirm({
                    title: '确认操作',
                    content: '<p>确定删除该属性吗？</p>',
                    onOk: () => {
						$wLabelService.delete(lid)
						.then(function(response) {
							var res = response.data;
							var code = res.rescode;
							var msg = res.msg;
							if(code == 100) {
								$this.data.data.splice(index, 1);
							}
							$this.$Message.info(msg);
						}, function(error) {
							$this.$Message.error('网络异常，请稍后再试！');
						});
                    },
                    onCancel: () => {
                    }
                });
			},
			edit2State(data) {
				var state = data.state;
				var firm = state == 1 ? '确定禁用该属性吗？' : '确定启用该属性吗？';
				this.$Modal.confirm({
                    title: '确认操作',
                    content: '<p>' + firm + '</p>',
                    onOk: () => {
                    		var $this = this;
						if(state == 1) {
							$wLabelService.disable(data.lid)
							.then(function(response) {
								var res = response.data;
								var code = res.rescode;
								var msg = res.msg;
								if(code == 100) {
									data.state = 0;
								}
								$this.$Message.info(msg);
							}, function(error) {
								$this.$Message.error('网络异常，请稍后再试！');
							});
						} else {
							$wLabelService.enable(data.lid)
							.then(function(response) {
								var res = response.data;
								var code = res.rescode;
								var msg = res.msg;
								if(code == 100) {
									data.state = 1;
								}
								$this.$Message.info(msg);
							}, function(error) {
								$this.$Message.error('网络异常，请稍后再试！');
							});
						}
                    },
                    onCancel: () => {
                    }
                });
			}
		}
	}
</script>

<style>
	.page {
	}
	
	.sort-view {
		margin-bottom: 20px;
	}
	
	.list-view {
		
	}
	.btns-view {
		margin-bottom: 10px;
		display: flex;
		display: -webkit-flex;
	}
	.btns-left-view {
		flex: 1;
		-webkit-flex: 1;
		-moz-flex: 1;
	}
	.btns-right-view {

	}
	.data-view {
		width: 100%;
	}
</style>